{% extends "base_generic.html" %}
{% load borrow_tags %}

{% block content %}
<div class="container">
  <div class="card" style="max-width: 700px; margin: 40px auto; position: relative;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <h2 style="color:#1976d2; margin: 0;">Title: {{ book.title }}</h2>
      <div style="display: flex; gap: 12px;">
        {% if user.is_authenticated %}
          {% if user|has_borrowed:book %}
            <button class="btn" disabled>书籍借出中</button>
          {% else %}
            <form method="post" action="{% url 'borrow-book' book.pk %}" style="display:inline;">
              {% csrf_token %}
              <button type="submit" class="btn">借阅</button>
            </form>
          {% endif %}
          <form method="post" action="{% url 'like-book' book.pk %}" style="display:inline;">
            {% csrf_token %}
            <button type="submit" class="btn">
              👍 {{ book.likes.count }}
            </button>
          </form>
        {% else %}
          <span style="color:#888;">请登录后操作</span>
        {% endif %}
      </div>
    </div>
    <p><b>Author:</b> <a href="{% url 'author-detail' book.author.pk %}">{{ book.author }}</a></p>
    <p><b>Summary:</b> {{ book.summary }}</p>
    <p><b>ISBN:</b> {{ book.isbn }}</p>
    <p><b>Language:</b> </p>
    <p><b>Genre:</b> {{ book.display_genre }}</p>
    <p><b>Copies</b></p>
  </div>

  <!-- 评论区 -->
  <div class="card" style="max-width: 700px; margin: 24px auto;">
    <h3 style="color:#1976d2;">书评</h3>
    {% for review in reviews %}
      <div style="border-bottom:1px solid #eee; padding:8px 0;">
        <b>{{ review.user.username }}</b>：{{ review.content }}
        <span style="color:#888; font-size:13px;">({{ review.created_at|date:'Y-m-d H:i' }})</span>
      </div>
    {% empty %}
      <div>暂无书评。</div>
    {% endfor %}
    {% if user.is_authenticated %}
      <form method="post" action="{% url 'review-book' book.pk %}" style="margin-top:12px;">
        {% csrf_token %}
        <textarea name="content" required style="width:100%;height:60px;resize:vertical;"></textarea>
        <button type="submit" class="btn" style="margin-top:6px;">发表书评</button>
      </form>
    {% else %}
      <span>（请登录后发表评论）</span>
    {% endif %}
  </div>
</div>
{% endblock %}
